<template>
  <div :class="className" :style="{height:height,width:width}" />
</template>

<script>
// import * as echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
import resize from '@/components/Charts/mixins/resize'

const animationDuration = 2000

export default {
  name: 'BarChart',
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '300px'
    }
  },
  data() {
    return {
      chart: null
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart()
      this.getData()
    })
    // window.addEventListener('resize', this.screenAdapter)

    // this.initChart()
    // this.updateData()
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
    // window.removeEventListener('resize', this.screenAdapter)
  },
  methods: {
    initChart() {
      this.chart = this.$echarts.init(this.$el, 'macarons')
      const initOption = {
        tooltip: {
          trigger: 'axis',
          backgroundColor: 'rgba(255,255,255,0.8)', // 设置背景图片 rgba格式
          color: 'black',
          borderWidth: '1', // 边框宽度设置1
          borderColor: 'gray', // 设置边框颜色
          textStyle: {
            color: 'black' // 设置文字颜色
          },
          axisPointer: { // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        legend: {
          data: ['指纹认证', '人脸认证', '其他']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [{
          type: 'category',
          // data: ['2020/7/19', '2020/7/20', '2020/7/21', '2020/7/22', '2020/7/23', '2020/7/24', '2020/7/25', '2020/7/26', '2020/7/27', '2020/7/28'],
          axisTick: {
            alignWithLabel: true
          }
        }],
        yAxis: [{
          type: 'value',
          axisTick: {
            show: false
          }
        }],
        series: [{
          name: '指纹认证',
          type: 'bar',
          // stack: 'vistors',
          barWidth: '20%',
          // data: [140904422, 140904422, 140904422, 140904422, 140904422, 140904422, 140904422, 140904422, 140904422, 140904422],
          animationDuration
        }, {
          name: '人脸认证',
          type: 'bar',
          // stack: 'vistors',
          barWidth: '20%',
          // data: [140904422, 140904422, 140904422, 140904422, 140904422, 140904422, 140904422, 140904422, 140904422, 140904422],
          animationDuration
        }, {
          name: '其他',
          type: 'bar',
          // stack: 'vistors', 图形在数值上叠加
          barWidth: '20%',
          // data: [31312093, 31312093, 31312093, 31312093, 31312093, 31312093, 31312093, 31312093, 31312093, 31312093],
          animationDuration
        }]
      }
      // this.chart.setOption({
      //   tooltip: {
      //     trigger: 'axis',
      //     backgroundColor: 'rgba(255,255,255,0.8)', // 设置背景图片 rgba格式
      //     color: 'black',
      //     borderWidth: '1', // 边框宽度设置1
      //     borderColor: 'gray', // 设置边框颜色
      //     textStyle: {
      //       color: 'black' // 设置文字颜色
      //     },
      //     axisPointer: { // 坐标轴指示器，坐标轴触发有效
      //       type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
      //     }
      //   },
      //   legend: {
      //     data: ['指纹认证', '人脸认证', '其他']
      //   },
      //   grid: {
      //     top: 10,
      //     left: '2%',
      //     right: '2%',
      //     bottom: '3%',
      //     containLabel: true
      //   },
      //   xAxis: [{
      //     type: 'category',
      //     data: ['2020/7/19', '2020/7/20', '2020/7/21', '2020/7/22', '2020/7/23', '2020/7/24', '2020/7/25', '2020/7/26', '2020/7/27', '2020/7/28'],
      //     axisTick: {
      //       alignWithLabel: true
      //     }
      //   }],
      //   yAxis: [{
      //     type: 'value',
      //     axisTick: {
      //       show: false
      //     }
      //   }],
      //   series: [{
      //     name: '指纹认证',
      //     type: 'bar',
      //     // stack: 'vistors',
      //     barWidth: '20%',
      //     data: [140904422, 140904422, 140904422, 140904422, 140904422, 140904422, 140904422, 140904422, 140904422, 140904422],
      //     animationDuration
      //   }, {
      //     name: '人脸认证',
      //     type: 'bar',
      //     // stack: 'vistors',
      //     barWidth: '20%',
      //     data: [140904422, 140904422, 140904422, 140904422, 140904422, 140904422, 140904422, 140904422, 140904422, 140904422],
      //     animationDuration
      //   }, {
      //     name: '其他',
      //     type: 'bar',
      //     // stack: 'vistors', 图形在数值上叠加
      //     barWidth: '20%',
      //     data: [31312093, 31312093, 31312093, 31312093, 31312093, 31312093, 31312093, 31312093, 31312093, 31312093],
      //     animationDuration
      //   }]
      // })
      this.chart.setOption(initOption)
    },
    getData() {
      this.updateData()
    },
    updateData() {
      const xName = ['2020/7/19', '2020/7/20', '2020/7/21', '2020/7/22', '2020/7/23', '2020/7/24', '2020/7/25', '2020/7/26', '2020/7/27', '2020/7/28']
      const fingerPrint = [140904422, 140904422, 140904422, 140904422, 140904422, 140904422, 140904422, 140904422, 140904422, 140904422]
      const face = [140904422, 140904422, 140904422, 140904422, 140904422, 140904422, 140904422, 140904422, 140904422, 140904422]
      const other = [31312093, 31312093, 31312093, 31312093, 31312093, 31312093, 31312093, 31312093, 31312093, 31312093]
      const updateOption = {
        xAxis: {
          data: xName
        },
        series: [{
          data: fingerPrint
        }, {
          data: face
        }, {
          data: other
        }]
      }
      this.chart.setOption(updateOption)
    }
    // screenAdapter() {
    //   this.chart.resize()
    // }
  }

}
</script>
<style scoped>
  .com-container {
    width: 100%;
    height: 100%;
  }
</style>
